<!--
 * @Author: 刘翔
 * @Date: 2025-08-06 10:50:37
 * @LastEditTime: 2025-09-02 16:20:26
 * @LastEditors: your name
 * @Description:组合页面17(学科建设)
 * @FilePath: \建达文件\ts-demo\ts-demo\src\pptHome\pageList\pageType17.vue
-->
<template>
  <div class="page-type-17">
    <div class="page-type-17-left">
      <LineChartArea v-if="getChartProps1()" ref="radarChart" v-bind="getChartProps1()" />
      <CardBox>
        <template #right>
          <span class="card-box-right-item-1" v-html="desc"></span>
        </template>
      </CardBox>
    </div>
    <div class="page-type-17-right">
      <DataTable v-if="getTableProps1()" ref="table1" v-bind="getTableProps1()" />
    </div>
  </div>
</template>

<script>
import DataTable from '../components/DataTable.vue';
import LineChartArea from '../components/LineChartArea';
import CardBox from '../components/cardBox.vue';
export default {
  name: 'pageType17',
  components: {
    DataTable,
    LineChartArea,
    CardBox,
  },
  props: {
    tableData1: {
      type: Object,
      default: () => {},
    },
    chartList1: {
      type: Object,
      default: () => {},
    },
    desc: {
      type: String,
      default: '',
    },
  },
  methods: {
    getTableProps1() {
      return {
        tableData: this.tableData1.data,
        columns: this.tableData1.columns,
        tableParams: {
          headerHeight: 60,
        },
        pptOptions: {
          x: 6, // X轴位置
          y: 0.8, // Y轴位置
          h: 4.5, // 高度
          title: {
            // 标题配置
            x: 0.5,
            y: 0.5,
            fontSize: 24,
            color: '363636',
            bold: true,
          },
          table: {
            // 表格配置
            colW: this.tableData1.columns.map(item => this.pptWidthPercentFn(item.widthPercent)),
            // 表格内容配置
            content: {
              fontSize: 8,
              color: '000000',
              bold: true,
            },
            // 表格标题配置
            title: {
              fontSize: 8,
              color: 'ffffff',
            },
            // 表格边框样式
            borderStyle: {
              color: '000000',
            },
            // 表格垂直对齐方式(middle, top, bottom)
            valign: 'middle',
            // 表格水平对齐方式(left, center, right)
            align: 'center',
            // 自动分页
            autoPage: false,
            // 自动分页标题是否显示
            autoPageRepeatHeader: false,
            // 自动分页标题行数
            autoPageHeaderRows: 1,
          },
        },
      };
    },
    getChartProps1() {
      return {
        title: this.chartList1.title,
        // 主系列数据
        primaryData: {
          name: this.chartList1.keyList[0],
          categories: this.chartList1.data.map(item => item[this.chartList1.XShow]),
          values: this.chartList1.data.map(item => item[this.chartList1.keyList[0]]),
        },
        // 次系列数据
        secondaryData: {
          name: this.chartList1.keyList[1],
          categories: this.chartList1.data.map(item => item[this.chartList1.XShow]),
          values: this.chartList1.data.map(item => item[this.chartList1.keyList[1]]),
        },
        chartConfig: {
          height: 850,
          colors: this.chartList1.colors,
          // 图例配置
          legend: {
            data: this.chartList1.keyList,
          },
          // 系列配置
          series: {
            // 平滑曲线
            // smooth: true,
            label: {
              show: true,
              position: 'top',
              fontSize: 18,
              formatter: '{c}',
            },
            // 主系列配置
            primary: {
              name: this.chartList1.keyList[0],
              itemStyle: {
                color: this.chartList1.colors[0],
              },
            },
            // 次系列配置
            secondary: {
              name: this.chartList1.keyList[1],
              itemStyle: {
                color: this.chartList1.colors[1],
              },
            },
          },
        },
        pptConfig: {
          // 图表位置和大小
          position: {
            x: 0,
            y: 1,
            w: 6,
            h: 3.5,
          },
          // 标题配置
          title: {
            x: 5.5,
            y: 1.2,
            fontSize: 16,
            color: '363636',
            bold: true,
          },
          // 图表配置
          chart: {
            //分类轴字体大小
            catAxisLabelFontSize: 6,
            //数据标签字体大小
            dataLabelFontSize: 8,
            showLegend: true,
            legendPos: 'b',
            showValue: true,
            // 图表颜色透明度
            chartColorsOpacity: 50,
            // 平滑曲线
            // lineSmooth: true,
          },
        },
      };
    },
    // 计算ppt宽度百分比(3.5是ppt表格目前总宽度)
    pptWidthPercentFn(pptWidthPercent) {
      return (pptWidthPercent / 100) * 3.5;
    },

    exportToPPT(pptx, slide) {
      this.$refs.radarChart.exportToPPT(pptx, slide);
      this.$refs.table1.exportToPPT(pptx, slide);
      //卡片
      slide.addText(
        [
          {
            text: `${this.desc}`,
            options: {
              fontSize: 12,
              color: '363636',
            },
          },
        ],
        {
          shape: pptx.shapes.ROUNDED_RECTANGLE,
          x: 0.5,
          y: 4.5,
          w: '50%',
          h: 0.8,
          rectRadius: 0.2,
          //边框
          line: { color: '151515', width: 0.5 },
          fill: { color: 'fff2ca' },
        }
      );
    },
  },
};
</script>

<style lang="less" scoped>
.page-type-17 {
  display: flex;
  width: 100%;
  height: 100%;
  .page-type-17-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 50%;
    height: 100%;
  }
  .page-type-17-right {
    width: 50%;
    height: 100%;
  }
  .card-box-container {
    margin: 10px 0;
    width: 95%;
    justify-content: left;
  }
}
</style>
